<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			box-sizing: border-box;
		}
		div.article{
			width: 200px;
			height: 300px;
			background-color: black;
			margin:0 auto;
		}
		div.top{
			width: 200px;
			height: 200px;
			padding:20px;
			
		}



		div#outer{
			height: 100%;
			border:5px solid #ccc;
			border-radius:50%;
			padding: 20px;

		}

		div#inner{
			height: 100%;
			border:10px solid #ffff;
			border-radius: 50%;
		}

		div.text{
			color: #ffff;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="article">
		<div class="top">
			<div id="outer">
				<div id="inner"></div>
			</div>
		</div>
		<div class="text">hi！</div>
	</div>
</body>
</html>













